<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>01_元素内容操作</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<!-- 01_元素内容操作：操作元素和元素内容的方式
		 html()        无参---功能：获取匹配元素集合中的第一个元素
		               有参 ---功能：获取匹配元素集合中的所有元素并替换
					   特点：添加元素+元素内容
		 val()          无参---功能：针对表单元素：input select。。。。。
		                             获取第一个表单元素的值【value】
		                 有参---功能：针对表单元素：input select。。。。。
						 设置表单元素值，input直接设置
						 select不能直接设置
						 特点：表单元素+内容，下拉列表只能添加存在value值
		
		 text()           无参：获取匹配元素集合中所有元素的文本内容
		                有参：【设置】过去匹配元素集合中所有元素的文本内容做替换0
						特点：添加内容
		 
		 
		 -->
		
	</head>
	<body>
		<h1>html() 函数的使用</h1> 
		<button>html()函数  有参</button>
		<span>lorem1</span>
		<span>Lorem2</span>
		<h1>val()函数的使用</h1>
		<button calss=".btn1">val() 函数 无参</button>
		<input type="text"  value="文本框真实数据1">
		<input type="text"  value="文本框真实数据2" placeholder="文本框提示" >
		<!-- html 按钮 。btn2  select>option*3 
		 jq：  点击按钮  显示第一个表单元素的值
		 -->
		 <br />
		 <button class="btn2">val() 函数【select】无参</button>
		 <button class="btn3"></button>
		 <select>
			 <option value="rem1">lorem1</option>
			 <option value="rem2">lorem2</option>
			 <option value="rem3">lorem3</option>
			 
		 </select>
		 <h1>text函数的使用：包裹内容：文本</h1>
		 <button class="btn4">text() 无参</button>
		 <button class="btn5">text() 有参</button>
		 <p>lorem4</p>
		  <p>lorem5</p>
		   <p>lorem6</p>
		<script>
			
			//抓到无参按钮，点击，打印p的text值
			
			$(".btn4").click(function(){
				var ptext=$("p").text();
				alert(ptext);
			});
			//抓到有参按钮，点击，改变p中文本的内容：改变效果
			$(".btn5").click(function(){
				$("p").text("改变效果");
				
			});
			
			
			
			
			
			
			
			
			/* $(".btn3").click(function(){
				//var vals=$("select").val("rem1");
				
				alert("val()函数针对下拉列表："+vals)
			});
			 */
			
			
			/* $(".btn2").click(function(){
							 var vals=$("select").val();
							 alert("val()函数针对下拉列表："+vals)
			}); */
			
			/* $(".btn1").click(function(){
				/* 变量名不允许使用关键字   js中关键字  for  in 遍历数组*/
				/* var ins=$("input").val();
				alert("val()针对input元素 无参："+ins) */
			}); */
			 
			
			
			/* $("button").click(function(){
				$("span").html("<span>lorem</span>");
			}); */
			
			/* 变量    js变量--jq
			int i=1；  Java写法  强类型语言
			var i=数值，元素；  JAvaSeript  弱类型语言
			
			
			
			 */
			/* var html=$("span").html(); */
			/* alert("html()函数的无参值："+html */
			/* ); */
			
		</script>
	</body>
</html>